<template>
  <div class="container">
    <div class="header">
      <div class="back_btn" @click="goBack">
        <i style="color:#387BFC !important" class="el-icon-arrow-left" />
      </div>
      <div class="main_bottom">
        <!-- <el-button v-if="startWorkStatus !=='1'" @click.stop="save">保存</el-button> -->
        <!-- <el-button v-if="startWorkStatus !=='1'&&buttonStatus=='1'" @click.stop="finish">完工</el-button> -->
        <el-button v-if=" toInspect == '1' && canToInspect==0 &&buttonStatus=='1' " @click.stop="submission ">送检</el-button>
        <el-button
          v-if="allData.createCheck == '0' && allData.startWorkStatus == '1'"
          @click.stop="convertToProductionInspection"
        >转生产检验单</el-button>
      </div>
    </div>
    <div class="container_content">
      <div class="AddOrUpdate_main left_content add_container showDetail add_container_table" :class="showKey.type">
        <div class="main_main info1">
          <el-form ref="form" :model="formData" :rules="rules" :inline="true">
            <div v-for="(item2, index2) in showKey.keys" :key="'index2' + index2" :class="getClass(item2)">
              <el-form-item v-if="item2.type == 'br'" class="showItem_br" />
              <el-form-item v-if="item2.type == 'form'" :label="item2.name">
                <div v-if="!showData[item2.key] && showData[item2.key] != 0" class="show noData">暂无</div>
                <div v-else-if="item2.key == 'status'" class="show">{{
                  showData[item2.key] == '1' || showData[item2.key] == 1 ? '启用' : '停用' }}</div>
                <div v-else class="show">{{ showData[item2.key] }}</div>
              </el-form-item>
              <el-form-item v-if="item2.type == 'file'" :label="item2.name">
                <FileManage
                  style="margin-left:10px"
                  :file-names.sync="showData[item2.fileName]"
                  :file-real-names.sync="showData[item2.fileRealName]"
                  :file-urls.sync="showData[item2.fileUrl]"
                  :row-index="1"
                  :readonly="true"
                >
                  <!-- <FileManageFull
                    :file-names="showData[item2.fileName]"
                    :file-real-names="showData[item2.fileRealName]"
                    :file-urls="showData[item2.fileUrl]"
                    :row-index="1"
                    :readonly="true"
                    @fileName="setFileName"
                  /> -->
                </filemanage>
              </el-form-item>
            </div>
          </el-form>
          <div class="tabs">
            <el-tabs v-model="activeName">
              <!-- <el-tab-pane label="生产输入" name="first">
                <div ref="table_container" style="width:100%" class="table_container draggableTable">
                  <el-table ref="table" :data="engineeringRequireDetailDemandData" stripe border>
                    <Column
                      v-for="(column, index) in tableColumns"
                      :key="index"
                      :prop="column.prop"
                      :is-show="column.isShow"
                      :label="column.label"
                      :sortable="column.sortable"
                      :width="column.width"
                      :min-width="column.minWidth"
                    />
                  </el-table>
                </div>
              </el-tab-pane> -->
              <el-tab-pane label="生产输出" name="first">
                <div ref="table_container2" style="width:100%" class="table_container draggableTable">
                  <el-table ref="table" :data="engineeringRequireDetailOutputData" stripe border>
                    <Column
                      v-for="(column, index) in tableColumns2"
                      :key="index"
                      :prop="column.prop"
                      :is-show="column.isShow"
                      :label="column.label"
                      :sortable="column.sortable"
                      :width="column.width"
                      :min-width="column.minWidth"
                    />
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="生产过程" name="third">
                <div ref="table_container3" style="width:100%" class="table_container draggableTable">
                  <el-table ref="table" :data="engineeringRequireDetailProcessData" stripe border>
                    <el-table-column label="序号" type="index" width="50" align="center" />
                    <Column
                      v-for="(column, index) in tableColumns3"
                      :key="index"
                      :prop="column.prop"
                      :is-show="column.isShow"
                      :label="column.label"
                      :sortable="column.sortable"
                      :width="column.width"
                      :min-width="column.minWidth"
                    />
                    <el-table-column label="图号" min-width="100" prop="pictureCode">
                      <template slot-scope="scope">
                        <div class="showPicture">
                          <!-- <div class="pictureCode_div">{{ scope.row.pictureCode }}</div> -->
                          <div class="file_div">
                            <FileManage
                              :file-names.sync="scope.row.fileName"
                              :file-real-names.sync="scope.row.fileRealName"
                              :file-urls.sync="scope.row.fileUrl"
                              :row-index="1"
                              :readonly="true"
                            />
                          </div>

                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

      </div>
      <div class="right_content">
        <div class="right_header">
          <div class="title">返工进度</div>
          <div class="progress_number">
            <div>完成进度{{ (reportNumber / productNumber * 100).toFixed(2) }}%</div>
            <div>{{ reportNumber }}/{{ productNumber }}</div>
          </div>
          <div class="progress">
            <div class="progress_bar" :style="{ width: processNumber + '%' }" />
          </div>
        </div>
        <div class="AddOrUpdate_main add_container column_twos right_headers">
          <div class="title">返工报工</div>
          <div class="main_main product">
            <el-form ref="form2" :model="formData2" :rules="rules2" :inline="true">
              <el-form-item label="开始时间" prop="startDate">
                <el-date-picker
                  v-model="formData2.startDate"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  placeholder="请选择"
                  :editable="false"
                />
              </el-form-item>
              <el-form-item label="结束时间" prop="endDate">
                <el-date-picker
                  v-model="formData2.endDate"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  placeholder="请选择"
                  :editable="false"
                />
              </el-form-item>
              <el-form-item label="报工数量" prop="reportNumber">
                <el-input v-model="formData2.reportNumber" type="number" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="不良数量" prop="badnessNumber">
                <el-input v-if="unDisabled!=0" v-model="formData2.badnessNumber" type="number" placeholder="暂无" :disabled="unDisabled!=0" />
                <el-input v-else v-model="formData2.badnessNumber" type="number" placeholder="请输入" :disabled="unDisabled!=0" />
              </el-form-item>
              <!-- <el-form-item label="报工类型" prop="taskTypeCode">
                <el-select v-model="formData2.taskTypeCode" placeholder="请选择">
                  <el-option
                    v-for="item in taskTypeCodelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item label="操作员" class="clickChoose">
                <el-input v-model="formData2.operateByName" placeholder="请选择" readonly />
                <a class="clickChoose_button" @click.prevent="choosePeople">
                  <svg-icon icon-class="选择弹框" />
                </a>
              </el-form-item>
              <el-form-item label="备注" class="double">
                <el-input v-model="formData2.remark" type="textarea" placeholder="请输入" maxlength="200" show-word-limit />
              </el-form-item>
            </el-form>
            <div class="confirm_btn">
              <el-button v-if="startWorkStatus !== '1' && buttonStatus == '1'" @click.stop="onSubmit">确定</el-button>
              <div v-else style="height:40px" />
            </div>
          </div>
        </div>
        <div class="formItem_header">
          报工记录
          <!-- <div class="formItem_header_operate">
            <a
              v-if="startWorkStatus !== '1' && buttonStatus == '1'"
              class="formItem_header_operate_item delete"
              @click="removeRow"
            >
              <svg-icon icon-class="删除" />
              <div class="item_name">删除</div>
            </a>
          </div> -->
        </div>
        <div ref="table_container4" class="table_container draggableTable">
          <el-table
            ref="table"
            :data="tableData"
            stripe
            border
            style="width: 99.9%;"
            @sort-change="(column) => { sortChange(column, this) }"
            @selection-change="(val) => { selectionChange(val, this) }"
          >
            <el-table-column type="selection" width="70" align="center" />
            <el-table-column label="开始时间" min-width="140" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.startDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" min-width="140" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.endDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作员" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.operateByName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报工数量" :min-width="SETTINGS.settings_decimalDigits_length">
              <template slot-scope="scope">
                <span>{{ scope.row.reportNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="不良数量" :min-width="SETTINGS.settings_decimalDigits_length">
              <template slot-scope="scope">
                <span>{{ scope.row.badnessNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="200" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog title="完工确认" :visible.sync="dialogVisible" width="400px">
      <div class="confirm_finish">
        <span style="margin-right:30px">确定完工吗</span>
        <el-radio v-model="isShow" label="1">送检</el-radio>
        <el-radio v-model="isShow" label="0">不送检</el-radio>
        <!-- <el-switch
          v-model="isShow"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#999999"
        /> -->
        <!-- <span>是否送检</span> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="cancel">取消</el-button>
        <el-button @click="confirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="submissionShow" title="送检确认" :visible.sync="submissionShow" width="400px">
      <div class="confirm_sub">
        <el-form ref="form3" :model="formData3" :rules="rules3" :inline="true">
          <el-form-item label="送检数量" prop="submissionNumber">
            <el-input v-model="submissionNumber" placeholder="请输入" type="number" />
          </el-form-item>
        </el-form>
        <!-- <span style="color:#ff4949">*</span>
        <span style="margin-right:20px">送检数量</span>
        <el-input v-model="submissionNumber" placeholder="请输入" type="number" /> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="submissionShow=false">取消</el-button>
        <el-button @click="submissionConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, addOrUpdate, remove, createCheck, toInspect } from '@/api/ProductionManagement/commencement'
import { getInfoByConfigKey } from '@/api/outsourceManage/outsourceReturnMaterial'
import seachUser from './searchUser.vue'

import {
  addOrUpdate as edits
} from '@/api/ProductionManagement/taskSheet'
import moment from 'moment'
export default {
  name: 'JlinkMes11Frontend6StartWork',

  data() {
    const validateStartTime = (rule, value, callback) => {
      if (this.formData2.endDate) {
        this.$refs.form2.clearValidate('endDate')
      }
      const startDate = parseInt(new Date(this.formData2.startDate).getTime())
      const endDate = parseInt(new Date(this.formData2.endDate).getTime())
      if (startDate && startDate > endDate) {
        callback(new Error('开始时间不能超过结束时间'))
      } else if (!value) {
        callback(new Error('开始时间不能为空'))
      } else {
        callback()
      }
    }
    const validateEndTime = (rule, value, callback) => {
      if (this.formData2.startDate) {
        this.$refs.form2.clearValidate('startDate')
      }
      const startDate = parseInt(new Date(this.formData2.startDate).getTime())
      const endDate = parseInt(new Date(this.formData2.endDate).getTime())
      if (startDate && startDate > endDate) {
        callback(new Error('结束时间不能小于开始时间'))
      } else if (!value) {
        callback(new Error('结束时间不能为空'))
      } else {
        callback()
      }
    }
    const validateCompleteNumber = (rule, value, callback) => {
      if (this.formData2.badnessNumber) {
        this.$refs.form2.clearValidate('badnessNumber')
      }
      if (!this.formData2.reportNumber) {
        callback(new Error('报工数量不能为空'))
      } else if (!this.SETTINGS.reg_no_zero.test(this.formData2.reportNumber)) {
        callback(new Error('报工数量填写不正确'))
      } else {
        callback()
      }
    }
    const validateBadnessNumber = (rule, value, callback) => {
      if (this.formData2.reportNumber) {
        this.$refs.form2.clearValidate('reportNumber')
      }
      if (!this.SETTINGS.reg_zero.test(value) && this.formData2.badnessNumber) {
        callback(new Error('不良数量填写不正确'))
      } else {
        callback()
      }
    }
    const valiSubmissionNumberr = (rule, value, callback) => {
      console.log(this.submissionNumber)
      this.$refs.form3.resetFields()
      if (this.submissionNumber > this.canSubmissionNumber) {
        callback(new Error('填写数量不能大于可送检数量'))
      } else if (!this.SETTINGS.reg_zero.test(this.submissionNumber) && this.submissionNumber) {
        callback(new Error('送检数量填写不正确'))
      } else if (!this.submissionNumber) {
        callback(new Error('送检数量填写不正确'))
      } else {
        callback()
      }
    }
    return {
      isShow: '', // 默认送检状态
      canSubmissionNumber: '',
      submissionNumber: '',
      canToInspect: '',
      dialogVisible: false,
      submissionShow: false,
      activeName: 'first',
      tableHeight: '312',
      tableHeight4: '350',
      showKey: {
        type: 'column_two',
        keys: [
          { type: 'form', name: '任务单号', key: 'code' },
          { type: 'form', name: '任务类型', key: 'taskTypeName' },
          { type: 'form', name: '物料编码', key: 'materialCode' },
          { type: 'form', name: '物料名称', key: 'materialName' },
          { type: 'form', name: '规格型号', key: 'materialModel' },
          { type: 'form', name: '工序', key: 'engineeringProcessName' },
          { type: 'file', name: '附件', fileName: 'fileName', fileRealName: 'fileRealName', fileUrl: 'fileUrl' },
          { type: 'form', name: '返工数量', key: 'productNumber' },
          { type: 'form', name: '责任人', key: 'chargeName' },
          { type: 'form', name: '完成日期', key: 'completeDate' },
          { type: 'form', name: '备注', key: 'remark', length: 'double' }
        ]
      },
      taskTypeCodelList: [ // 选择组件数据源
        { value: '0', label: '生产报工' },
        { value: '1', label: '返工报工' }
      ],
      showData: {},
      mainId: 'id', // 表格行ID
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      // tableColumns: [
      //   { prop: 'materialCode', label: '物料编码' },
      //   { prop: 'materialName', label: '物料名称' },
      //   { prop: 'materialModel', label: '规格型号' },
      //   { prop: 'materialTypeName', label: '物料分类' },
      //   { prop: 'materialUnitName', label: '物料单位' },
      //   { prop: 'needNumber', label: '需求数量' }
      // ],
      tableColumns2: [
        { prop: 'materialCode', label: '物料编码' },
        { prop: 'materialName', label: '物料名称' },
        { prop: 'materialModel', label: '规格型号' },
        { prop: 'materialTypeName', label: '物料分类' },
        { prop: 'materialUnitName', label: '物料单位' }
        // { prop: 'outputNumber', label: '产出数量' }
      ],
      tableColumns3: [
        { prop: 'operationDescription', label: '操作描述' },
        { prop: 'productCharacter', label: '产品特性' },
        { prop: 'courseCharacter', label: '过程特性' }
        // { prop: 'pictureCode', label: '图号' }
      ],
      model: 0,
      engineeringRequireDetailDemandData: [],
      engineeringRequireDetailOutputData: [],
      engineeringRequireDetailProcessData: [],
      tableData: [],
      reportNumber: 0,
      unDisabled: '',
      productNumber: 0,
      toInspect: '0', // 工艺要求是否选择了送检
      materialId: '', // 工艺要求是否选择了送检
      canInputMaxNumber: '', // 可以返工和不良总和的最大值
      formData: {},
      rules: {},
      formData2: {
        startDate: '',
        endDate: '',
        reportNumber: '',
        badnessNumber: '',
        remark: '',
        operateBy: '',
        operateByName: ''
      },
      startWorkStatus: '0',
      rules2: {
        startDate: [
          { required: true, validator: validateStartTime, trigger: 'change' }
        ],
        endDate: [
          { required: true, validator: validateEndTime, trigger: 'change' }
        ],
        reportNumber: [
          { required: true, validator: validateCompleteNumber, trigger: 'change' }
        ],
        badnessNumber: [
          { validator: validateBadnessNumber, trigger: 'change' }
        ]
      },
      rules3: {
        submissionNumber: [
          { required: true, validator: valiSubmissionNumberr, trigger: 'change' }
        ]
      },
      formData3: {
        submissionNumber: ''
      },
      allData: {},
      buttonStatus: '1'
    }
  },
  computed: {
    processNumber() {
      if (this.reportNumber / this.productNumber * 100 > 100) {
        return 100
      } else {
        return this.reportNumber / this.productNumber * 100
      }
    }
  },
  mounted() {
    this.buttonStatus = this.$route.query.buttonStatus
    this.getInfo(this.$route.query.id)
    this.formData2.operateByName = this.$store.state.user.name
    this.formData2.operateBy = this.$store.state.user.userId
  },

  methods: {
    setFileName(...data) {
      this.tableData[data[3]].fileName = data[0]
      this.tableData[data[3]].fileRealName = data[1]
      this.tableData[data[3]].url = data[2]
    },
    convertToProductionInspection() {
      this.$confirm('确认生成生产检验单吗？', '质检确认', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        cancelButtonClass: 'product_cancel_buttons'
        // type: 'warning'
      }).then(() => {
        this.allData.createCheck = '1'
        createCheck(this.allData).then(res => {
          this.$message.success('操作成功')
          this.$router.push('/ProductionManagement/ProductionCommencement')
        })
      }).catch(() => {

      })
    },
    choosePeople() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: seachUser, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            userId: this.formData2.operateBy ? this.formData2.operateBy : ''
          } // props
        },
        area: ['880px', '700px'],
        title: '选择责任人', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    onSubmit() {
      this.$refs['form2'].validate(valid => {
        if (valid) {
          if (this.model != '1') {
            if (this.showData.relateTaskId) { // 返工
              if ((this.formData2.reportNumber * 1 + this.formData2.badnessNumber * 1) > this.canInputMaxNumber) {
                this.$message.warning('本次报工总和超上限,无法报工！')
                return
              }
            }
          }
          addOrUpdate({ ...this.formData2, productionTaskId: Number(this.$route.query.id), materialId: this.materialId }).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.getInfo(this.$route.query.id)
          })
        }
      })
    },
    finish() {
      // 获取是否送检配置
      getInfoByConfigKey('productionCommencementStatus').then(res => {
        this.isShow = res.data.productionCommencementStatus
      })
      this.dialogVisible = true
    },
    submission() {
      this.submissionShow = true
      this.submissionNumber = this.canSubmissionNumber
    },
    submissionConfirm() {
      this.$refs['form3'].validate(valid => {
        if (valid) {
          toInspect({ id: this.showData.id, inspectNumber: this.submissionNumber }).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.submissionShow = false
            this.getInfo(this.$route.query.id)
          })
        }
      })
      // if (!this.submissionNumber) {
      //   this.$message.warning('送检数量不能为空')
      // } else if (!this.SETTINGS.reg_no_zero.test(this.submissionNumber)) {
      //   this.$message.warning('送检数量填写不正确')
      // } else if (this.submissionNumber > this.canSubmissionNumber) {
      //   this.$message.warning('填写数量不能大于可送检数量')
      // } else {
      // }
    },
    showPeople(data) {
      // 解决视图不更新
      this.$delete(this.formData2, 'operateByName')
      this.$set(this.formData2, 'operateBy', data.userId)
      this.$set(this.formData2, 'operateByName', data.realName)
    },
    cancel() {
      this.dialogVisible = false
    },
    confirm() {
      this.allData.startWorkStatus = '1'
      this.allData.status = '4'
      edits({ ...this.allData, createCheck: this.isShow }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.dialogVisible = false
        // this.getInfo(this.$route.query.id)
        this.$router.push('/ProductionManagement/ProductionCommencement')
      })
    },
    removeRow() {
      if (this.selectionsAll.length > 0) {
        this.$confirm('是否确认删除?', '删除确认', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          cancelButtonClass: 'cancelClass',
          type: 'warning'
        }).then(() => {
          remove(this.selectionsAll.map(item => item.id).toString()).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getInfo(this.$route.query.id)
            this.selectionsAll = []
            // this.$router.push('/ProductionManagement/ProductionCommencement')
          })
        })
        return
      } else {
        this.$message.warning('请选择要删除的物料明细')
        return
      }
      // this.tableData = this.tableData.filter((ele) => this.selectionsAll.every((item) => ele.id !== item.id))
    },
    goBack() {
      this.$router.push('/ProductionManagement/ProductionCommencement')
    },
    getInfo(id) {
      getInfo(id).then(res => {
        this.model = res.data.productionTask.model

        this.allData = res.data.productionTask
        this.showData = res.data.productionTask
        this.engineeringRequireDetailDemandData = res.data.ins
        this.engineeringRequireDetailOutputData = [res.data.productionTask]
        this.engineeringRequireDetailProcessData = res.data.processes
        this.tableData = res.data.productionReportForWorks
        this.reportNumber = res.data.productionTask.qualifiedTotalNumber ? res.data.productionTask.qualifiedTotalNumber : 0
        this.productNumber = res.data.productionTask.productNumber
        this.toInspect = res.data.productionTask.toInspect
        this.canToInspect = res.data.productionTask.parentId
        this.unDisabled = res.data.productionTask.parentId
        this.materialId = res.data.productionTask.materialId
        this.canSubmissionNumber = res.data.productionTask.reportTotalNumber * 1 - res.data.productionTask.inspectTotalNumber * 1

        this.canInputMaxNumber = Math.floor(res.data.outs[0].rawMaterialNumber * 1 / (res.data.outs[0].demandNumber * 1)) || 0

        this.formData2.reportNumber = ''
        this.formData2.badnessNumber = ''
        this.formData2.remark = ''
        this.startWorkStatus = res.data.startWorkStatus
        this.$refs.form2.resetFields()
        this.formData2.startDate = moment(new Date()).format('YYYY-MM-DD') + ' 00:00'
        this.formData2.endDate = moment(new Date()).format('YYYY-MM-DD HH:mm')
        // this.$refs.form2.clearValidate('reportNumber')
        this.$nextTick(() => {
          // this.tableHeight = this.$refs.table_container.offsetHeight - 20
          this.tableHeight4 = this.$refs.table_container4.offsetHeight - 20
          // this.getMaxNumebr(this.engineeringRequireDetailOutputData)
        })
      })
    },
    // 获取最大报工，不良总和
    // getMaxNumebr(list) {
    //   list.map((item) => {
    //     item.maxNumber = Math.floor(item.rawMaterialNumber * 1 / (item.demandNumber * 1))
    //   })
    //   const a = list.sort((a, b) => a.maxNumber - b.maxNumber)
    //   console.log(a, '最小值')
    //   this.canInputMaxNumber = a[0].maxNumber
    // },
    getClass(item) {
      let res = ''
      if (item.type == 'form' || item.type == 'br') {
        res += 'showItem'
        if (item.length && item.length == 'double') {
          res += ' double'
        }
      } else if (item.type == 'file') {
        res += 'showItem'
      } else {
        res += 'showTable'
      }

      return res
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-time-panel {
  width: 150px !important;
}

/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.confirm_finish {
  display: flex;
  align-items: center;

  .el-radio {
    margin-left: 35px;
    margin-right: 10px;
  }

  span {
    margin: 0 10px;
  }
}

/deep/ .el-dialog__header {
  // background-color: #387bfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;

  .el-dialog__headerbtn {
    position: unset !important;
  }

  .el-dialog__title {
    // color: white;
    font-size: 15px;
  }

  .el-dialog__close {
    // color: white !important;
  }
}

.formItem_header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .formItem_header_operate {
    display: flex;

    .formItem_header_operate_item {
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 10px;
      font-size: 16px;
      margin-left: 10px;
      border-radius: 4px;
      color: rgba(56, 123, 252, 1);
      background-color: rgba(235, 242, 255, 1);

      .item_name {
        font-size: 14px;
        padding-left: 10px;
      }
    }

    .formItem_header_operate_item:hover {
      background-color: rgba(235, 242, 255, 0.5);
    }

    .delete {
      color: rgba(255, 70, 70, 1);
      background-color: rgba(235, 242, 255, 1);
    }

    .delete:hover {
      background-color: rgba(235, 242, 255, 0.5);
    }
  }
}

.table_container {
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    text-align: left;
  }
}

/deep/ .el-tabs__header {
  margin: 0 !important;
}

.column_twos {
  /deep/ .el-form-item {
    width: calc(50% - 40px) !important;
    margin: 10px 20px !important;

  }

  .double {
    width: 100% !important;
  }
}

.tabs {
  margin-top: 30px;
}

.confirm_btn {
  text-align: right;
  margin: 40px 20px 20px 0;
}

.showDetail {
  margin-bottom: 0;

  .table_container {
    padding-top: 0 !important;
  }
}

.container {
  height: 100vh;
  width: 100%;
  background: #f7f8fa;

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 0px rgba(29, 65, 134, 0.18);
    height: 80px;

    .back_btn {
      height: 40px;
      width: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 40px;
      background: #EBF2FF;
      border: 1px solid #387BFC;
    }
  }

  .container_content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: calc(100% - 80px);
    padding: 20px;

    .left_content {
      width: 50%;
    }

    .right_content {
      width: 50%;
      background: #FFFFFF;
      overflow: auto;
      border-left: 1px solid #D8D8D8;

      .right_header {
        padding: 20px;
        border-bottom: 1px solid #D8D8D8;

        .title {
          margin-bottom: 20px;
        }

        .progress_number {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          color: #999;
        }

        .progress {
          margin-top: 10px;
          height: 12px;
          width: 100%;
          border-radius: 6px;
          background: rgba(107, 189, 255, 0.3);

          .progress_bar {
            height: 12px;
            border-radius: 6px;
            background: #6BBDFF;
          }
        }
      }

      .right_headers {
        border-bottom: 1px solid #D8D8D8;

        .title {
          margin: 20px 0 0 20px;
        }
      }
    }
  }
}

.AddOrUpdate_main {
  // flex:1;
  background: #FFFFFF;
}

.main_main {

  .el-form {
    // height: 100%;
    align-content: flex-start;

    .showItem {
      margin-left: 20px;
      margin-right: 20px;
      width: calc(50% - 40px);
    }

    /deep/ .el-form-item {
      width: 100%;
      //   border-bottom: 1px solid rgba(105,105,105,0.2);
      margin-left: 0;
      margin-right: 0;

      // .el-form-item__label:before{
      //   content: none;
      // }
      .el-form-item__content {
        flex: 1;
        width: unset;
        margin-right: 0px;
      }
    }

    .double {
      width: calc(100% - 40px);
      //.show{
      //  overflow: hidden;
      //  text-overflow: ellipsis;
      //  display: -webkit-box;
      //  -webkit-line-clamp: 2;
      //  -webkit-box-orient: vertical;
      //}
    }
  }

  .showTable {
    width: 100%;
  }
}

.column_one {
  .showItem {
    width: 100% !important;
  }
}

.noData {
  color: #c0c4cc;
}

.show {
  height: fit-content !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.FileManageFull_container {
  padding-top: 10px;
  padding-left: 10px;
}

.showItem_br {
  border-bottom: 0 !important;
}

.showPicture {
  display: flex;

  .file_div {
    margin-left: 10px;
    color: blue;
  }
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  /*滚动条宽度*/
  height: 8px;
  /*滚动条高度*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
  /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
  background-color: #eeeeee;
  /*滚动条的背景颜色*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: rgb(145, 143, 143);
  /*滚动条的背景颜色*/
}

/deep/ .el-tabs__content {
  width: 100%;
}

/deep/ .el-tab-pane {
  width: 100%;
}

.left_content {
  height: 100%;

  .main_main {
    height: 100%;
    display: flex;
    flex-direction: column;

    /deep/ .el-form {
      height: fit-content;
    }

    .tabs {
      flex: 1;

      .el-tabs {
        height: 100%;

        .table_container {
          height: 100%;
        }
      }
    }
  }
}

.info1 {
  /deep/ .el-form-item {
    align-items: center;

    .el-form-item__label {
      color: #1F51B3;
      font-size: 15px;
    }

    .el-form-item__content {
      color: #333333 !important;
      font-size: 15px;
    }
  }
}

.el-table {
  font-size: 15px;
}
.confirm_sub{
/deep/.el-form-item{
  margin-bottom: 0 !important;
}
/deep/.el-form-item__label{
      color: #666 !important;
      font-size: 14px;
      font-weight: 400;
}
  padding-left: 30px;

  /deep/.el-input {
    width: 240px !important;
  }
}
</style>
